<template>
  <view
    v-if="platform === 'H5'"
    class="XNavigateBackIcon"
    @click.stop="navigate({ navMethod: 'navigateBack' })"
  >
    <image class="icon" src="/static/backIcon.png" mode="scaleToFill" />
    <!-- <uni-icons class="icon" type="home" size="22" color="#ffffff"></uni-icons> -->
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { navigate } from "@/util/navigate";
import { platform } from "@/util/platform";
import store from "@/store/store";
const showHome = ref(false);
const iconTopHeight = ref("");
onMounted(() => {
  const pages = getCurrentPages();
  if (pages.length <= 1) showHome.value = true;
  initHeight();
});
function initHeight() {
  const { statusBarHeight, titleBarHeight } = store.programState;
  iconTopHeight.value = `44px`;
}
</script>

<style lang="scss" scoped>
.XNavigateBackIcon {
  width: 64rpx;
  height: 64rpx;
  top: v-bind(iconTopHeight);
  position: fixed;
  left: 10rpx;
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  > .text {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #fffefe;
    line-height: 80rpx;
    display: inline-block;
  }
  > .icon {
    width: 112rpx;
  height: 96rpx;
  }
}
</style>
